<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Photo Album App</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="/static/js/jquery.min.js"></script>
        <script type="text/javascript" src="/static/js/jquery.json-1.3.js"></script>
        <script type="text/javascript" src="/static/js/jquery.history.js"></script>
        <script type="text/javascript" src="/get/application/jquery.pretty.js"></script>
        <script type="text/javascript" src="/get/application/app.js"></script>
        <link rel="stylesheet" href="/get/application/app.css" type="text/css" media="screen"/>
    </head>
    <body>
        <div id="wrapper">
            <div class="inner">
                <noscript>
                    <div id="unsupported">
                        <h1 id="mainTitle">Photo Album</h1>
                        <p class="noscript">You must have javascript enabled for this application.</p>
                    </div>
                </noscript>
                <h1 id="mainTitle"></h1>
                <div id="tabNav">
                    <ul>
                        <li id="homeTab" class="selected"><a href="#home">Home</a></li>
                        <li id="uploadTab"><a href="#upload">Add a Photo</a></li>
                        <li id="settingsTab"><a href="#settings">Settings</a></li>
                    </ul>
                </div>
            </div>

            <!-- SCREENS -->
            <div id="homeScreen" class="screen">
                <div class="inner">
                    <div id="none">
                        <p>No photos. <span class="admin"><a href="#upload">Click here to add a photo</a></span></p>
                    </div>
                    <div id="photoPager">
                        <p>Page: <span>1/1</span></p>
                        <ul>
                            <li class="template"><a href="#home:1">1</a></li>
                            <li><a href="#home:1">1</a></li>
                            <li><a href="#home:2">2</a></li>
                        </ul>
                    </div>
                    <table id="photos">
                        <tr id="homeTemplate" class="template">
                            <td class="available">
                                <div class="photo photo1">
                                    <a href="#id" title="Click to view details"><!-- img --></a>
                                </div>
                                <div class="metadata metadata1">
                                    <h3><a href="#id"><!-- title --></a></h3>
                                    <p class="updated"><!-- created --></p>
                                    <p class="comments"><!-- num comments --></p>
                                </div>
                            </td>
                            <td class="available">
                                <div class="photo photo2">
                                    <a href="#id" title="Click to view details"><!-- img --></a>
                                </div>
                                <div class="metadata metadata2">
                                    <h3><a href="#id"><!-- title --></a></h3>
                                    <p class="updated"><!-- created --></p>
                                    <p class="comments"><!-- num comments --></p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="detailScreen" class="screen">
                <div class="inner">
                    <div id="photoNav">
                        <a href="#id" class="prev">Previous</a>
                        <a href="#id" class="next">Next</a>
                    </div>
                    <div id="close"><a href="#home" class="close">Close</a></div>

                    <div id="detailWrapper">
                        <div id="infoWrapper">
                            <h3><!-- title --></h3>
                            <div class="metadata">
                                <p class="author"><!-- author --></p>
                                <p class="updated"><!-- created --></p>
                                <p class="description"><!-- description --></p>
                            </div>
                        </div>
                        <div id="editFormWrapper">
                            <form id="editForm" action="" method="post">
                                <dl>
                                    <dt><label for="title">Title <abbr title="required field">*</abbr></label></dt>
                                    <dd><input name="title" id="editTitle" type="text" class="text" size="30"/></dd>

                                    <dt><label for="description">Description</label></dt>
                                    <dd><textarea name="description" id="editDescription" cols="30" rows="6"></textarea>

                                    <dd class="buttons">
                                        <input type="submit" class="submit" value="Save" />
                                        <input type="button" class="cancel" value="Cancel" />
                                    </dd>
                                </dl>
                            </form>
                        </div>
                        <div id="editNav">
                            <a href="#noop" class="edit">Edit</a>
                            <a href="#noop" class="delete">Delete</a>
                        </div>
                        <div class="photo"><!--img --></div> 
                    </div>
                    <div id="extraTools">
                        <a href="#noop" class="directLink">Direct link to photo</a>
                        <a href="#noop" class="setPicture">Set as main album picture</a>&nbsp;&nbsp;<span id="setPictureStatus"></span>
                    </div>
                    <div id="comments">
                        <h3>Comments</h3>
                        <ul>
                            <li id="commentTemplate" class="template">
                                <div class="commentNav">
                                    <a href="#" class="delete">Delete</a>
                                </div>
                                <h4><a href="#"><!-- user details --></a></h4>
                                <p class="updated"><!-- date of comment --></p>
                                <p class="commentBody"><!-- comment --></p>
                            </li>
                        </ul>
                        <form id="commentForm" action="" method="post">
                            <div class="formWrapper">
                                <dl>
                                    <dt><label for="comment">Leave a comment</label></dt>
                                    <dd><textarea name="comment" id="comment" cols="30" rows="4"></textarea>
                                    <dd class="buttons"><input type="submit" class="submit" value="Submit" /></dd>
                                </dl>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div id="uploadScreen" class="screen">
                <form id="uploadForm" action="" method="post" enctype="multipart/form-data" target="uploadTarget">
                    <div class="formWrapper">
                        <dl>
                            <dt><label for="value">Photo <abbr title="required field">*</abbr></label></dt>
                            <dd><input name="value" id="value" type="file" class="text" /></dd>

                            <dt><label for="title">Title <abbr title="required field">*</abbr></label></dt>
                            <dd><input name="title" id="title" type="text" class="text" size="30"/></dd>

                            <dt><label for="description">Description</label></dt>
                            <dd><textarea name="description" id="description" cols="30" rows="6"></textarea>

                            <dd class="buttons"><input type="submit" class="submit" value="Upload" /></dd>
                        </dl>
                    </div>
                </form>
                <iframe id="uploadTarget" class="formFrame" name="uploadTarget" src="" width="0" height="0"></iframe>                 
            </div>
            <div id="settingsScreen" class="screen">
                <form id="settingsForm" action="" method="post">
                    <div class="formWrapper">
                        <dl>
                            <dt><label for="albumTitle">Title <abbr title="required field">*</abbr></label></dt>
                            <dd><input name="value" id="albumTitle" type="text" class="text" size="30"/></dd>

                            <!--
                            <dt><label for="autoRefresh">Automatically refresh</label></dt>
                            <dd><input name="autoRefresh" id="autoRefresh" type="checkbox" class="checkbox" value="yes"/></dd>
                            -->

                            <dt><label for="enableComments">Enable comments</label></dt>
                            <dd><input name="enableComments" id="enableComments" type="checkbox" class="checkbox" value="yes"/></dd>

                            <dt class="group"><label for="enableEditor">Allow editors to upload</label></dt>
                            <dd class="group"><input name="enableEditor" id="enableEditor" type="checkbox" class="checkbox" value="yes"/></dd>
                            <dd class="buttons"><input type="submit" class="submit" value="Submit" /></dd>
                        </dl>
                    </div>
                </form>
            </div>
            <div id="loading">
                <p>Loading...</p>
            </div>
            <div id="error">
                <h3>An Error has Occurred</h3>
                <div class="inner">
                    <p class="message"><!-- message --></p>
                    <p class="ok">
                        <a href="#noop">OK</a>
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>
